<template>
	<view class='container'>
		<!--input列表 -->
		<view class='input-box'>
			<view class="section">
				<text>收 货 人</text>
				<input placeholder='姓名' type='text' maxlength='15' :value="receiver" @input="onReceiverInput($event)" />
			</view>
			<view class="section">
				<text>手机号码</text>
				<input placeholder='11位手机号码' type='number' maxlength='11' :value="mobile" @input="onMobileInput($event)" />
			</view>
			<view class="section" @click="translate($event)">
				<text>所在地区</text>
				<view class="pca">{{ province }} {{ city }} {{ area }}{{ show }}</view>
				<view class="animation-element-wrapper" :animation="animation"
					:style="{ visibility: show ? 'visible' : 'hidden' }" @click.stop="hiddenFloatView($event)">
					<view class="animation-element" @click.stop="nono($event)">
						<text class="right-bt" @click.stop="hiddenFloatView($event)">确定</text>
						<view class="line"></view>
						<picker-view indicator-style="height: 50rpx;" :value="value" @change="bindChange($event)">
							<!--省-->
							<picker-view-column>
								<view v-for="(item, index) in provArray" :key="index">
									{{ item.areaName }}
								</view>
							</picker-view-column>
							<!--地级市-->
							<picker-view-column>
								<view v-for="(item) in cityArray" :key="item.areaName">
									{{ item.areaName }}
								</view>
							</picker-view-column>
							<!--区县-->
							<picker-view-column>
								<view v-for="item in areaArray" :key="item.areaName">
									{{ item.areaName }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

				<view class='arrow'>
					<image src='../../static/icon/more.png' lazy-load></image>
				</view>
			</view>
			<view class="section">
				<text>详细地址</text>
				<input placeholder='如楼号/单元/门牌号' type='text' :value="addr" @input="onAddrInput($event)" />
			</view>
		</view>
		<!-- end input列表 -->
		<!-- 功能按钮 -->
		<view class='btn-box'>
			<view class='keep btn' @click='onSaveAddr($event)'>
				<text>保存收货地址</text>
			</view>

			<view class='clear btn' @click="onDeleteAddr($event)" v-if="addrId != 0">
				<text>删除收货地址</text>
			</view>
		</view>
		<!-- end 功能按钮 -->
	</view>
</template>

<script>
import * as http from "../../utils/http.js";
let index = [18, 0, 0];

let t = 0;
let show = false;
let moveY = 200;
export default {
	data() {
		return {
			value: [0, 0, 0],
			provArray: [],
			cityArray: [],
			areaArray: [],
			province: "",
			city: "",
			area: "",
			provinceId: 0,
			cityId: 0,
			areaId: 0,
			receiver: "",
			mobile: "",
			addr: "",
			addrId: 0,
			show: false
		}
	},
	onLoad: function (options) {
		if (options.addrId) {
			uni.showLoading();
			var params = {
				url: "/p/address/addrInfo/" + options.addrId,
				method: "GET",
				data: {},
				callBack: res => {
					//console.log(res)
					this.province = res.province;
					this.city = res.city;
					this.area = res.area;
					this.provinceId = res.provinceId;
					this.cityId = res.cityId;
					this.areaId = res.areaId;
					this.receiver = res.receiver;
					this.mobile = res.mobile;
					this.addr = res.addr;
					this.addrId = options.addrId;
					this.initCityData(res.provinceId, res.cityId, res.areaId);
					uni.hideLoading();
				}
			}
			http.request(params);
		} else {
			this.initCityData(this.provinceId, this.cityId, this.areaId);
		}
	},
	onReady: function () {
		// this.$set('animation',uni.createAnimation({
		// 	  transformOrigin: "50% 50%",
		// 	  duration: 0,
		// 	  timingFunction: "ease",
		// 	  delay: 0
		// 	}
		//    ))
		this.animation = uni.createAnimation({
			transformOrigin: "50% 50%",
			duration: 0,
			timingFunction: "ease",
			delay: 0
		}
		)
		this.animation.translateY(200 + 'vh').step();
		this.animation = this.animation.export();
		// this.$set('show',show)
		//this.show=show;
	},
	methods: {
		nono(e) {
			console.log('-----------')
		},
		initCityData: function (provinceId, cityId, areaId) {
			var ths = this;
			uni.showLoading();
			var params = {
				url: "/p/area/listByPid",
				method: "GET",
				data: {
					pid: 0
				},
				callBack: function (res) {
					//console.log(res)
					ths.provArray = res
					if (provinceId) {
						for (var index in res) {
							if (res[index].areaId == provinceId) {
								ths.value = [index, ths.value[1], ths.value[2]]
							}
						}
					}
					ths.getCityArray(provinceId ? provinceId : res[0].areaId, cityId, areaId);
					uni.hideLoading();
				}
			}
			http.request(params);
		},
		//滑动事件
		bindChange: function (e) {
			var ths = this;
			var val = e.detail.value

			//判断滑动的是第几个column
			//若省份column做了滑动则定位到地级市和区县第一位
			if (index[0] != val[0]) {
				val[1] = 0;
				val[2] = 0;
				//更新数据
				ths.getCityArray(this.provArray[val[0]].areaId);//获取地级市数据
			} else {    //若省份column未做滑动，地级市做了滑动则定位区县第一位
				if (index[1] != val[1]) {
					val[2] = 0;
					//更新数据
					ths.getAreaArray(this.cityArray[val[1]].areaId);//获取区县数据
				} else {

				}
			}
			index = val;
			this.value = [val[0], val[1], val[2]];
			this.province = this.provArray[ths.value[0]].areaName;
			this.city = this.cityArray[ths.value[1]].areaName;
			this.area = this.areaArray[ths.value[2]].areaName;
			this.provinceId = this.provArray[ths.value[0]].areaId;
			this.cityId = this.cityArray[ths.value[1]].areaId;
			this.areaId = this.areaArray[ths.value[2]].areaId;
		},
		//移动按钮点击事件
		translate: function (e) {

			if (t == 0) {
				moveY = 0;
				show = false;
				t = 1;
			} else {
				moveY = 200;
				show = true;
				t = 0;
			}
			this.show = true
			console.log('选择地址', moveY, show)
			// this.animation.translate(arr[0], arr[1]).step();
			this.animationEvents(this, moveY, show);

		},
		//隐藏弹窗浮层
		hiddenFloatView(e) {
			//console.log(e);
			moveY = 200;
			show = true;
			this.show = false;
			t = 0;
			this.animationEvents(this, moveY, show);

		},

		//动画事件
		animationEvents: function (that, moveY, show) {
			//console.log("moveY:" + moveY + "\nshow:" + show);
			that.animation = uni.createAnimation({
				transformOrigin: "50% 50%",
				duration: 400,
				timingFunction: "ease",
				delay: 0
			}
			)
			that.animation.translateY(moveY + 'vh').step()

			that.animation = that.animation.export()
		},

		/**
		 * 根据省份ID获取 城市数据
		 */
		getCityArray: function (provinceId, cityId, areaId) {
			var ths = this;
			var params = {
				url: "/p/area/listByPid",
				method: "GET",
				data: {
					pid: provinceId
				},
				callBack: function (res) {
					//console.log(res)
					ths.cityArray = res
					if (cityId) {
						for (var index in res) {
							if (res[index].areaId == cityId) {
								ths.value = [ths.value[0], index, ths.value[2]];
							}
						}
					}
					ths.getAreaArray(cityId ? cityId : res[0].areaId, areaId);
					uni.hideLoading();
				}
			}
			http.request(params);
		},

		/**
			* 根据城市ID获取 区数据
			*/
		getAreaArray: function (cityId, areaId) {
			var ths = this;
			var params = {
				url: "/p/area/listByPid",
				method: "GET",
				data: {
					pid: cityId
				},
				callBack: function (res) {
					//console.log(res)
					ths.areaArray = res;
					if (areaId) {

						for (var _index in res) {
							if (res[_index].areaId == areaId) {
								ths.value = [ths.value[0], ths.value[1], _index];
							}
						}

						index = ths.value;


						ths.province = ths.province
						ths.city = ths.city
						ths.area = ths.area
						ths.provinceId = ths.provinceId
						ths.cityId = ths.cityId
						ths.areaId = ths.areaId


					} else {
						ths.province = ths.provArray[ths.value[0]].areaName;
						ths.city = ths.cityArray[ths.value[1]].areaName;
						ths.area = ths.areaArray[ths.value[2]].areaName;
						ths.provinceId = ths.provArray[ths.value[0]].areaId;
						ths.cityId = ths.cityArray[ths.value[1]].areaId;
						ths.areaId = ths.areaArray[ths.value[2]].areaId;
					}

					uni.hideLoading();
				}
			}
			http.request(params);
		},

		bindRegionChange: function (e) {
			//console.log('picker发送选择改变，携带值为', e.detail.value)
			this.region = e.detail.value
		},


		/**
		 * 保存地址
		 */
		onSaveAddr: function () {
			var ths = this;
			var receiver = ths.receiver;
			var mobile = ths.mobile;
			var addr = ths.addr;

			if (!receiver) {
				uni.showToast({
					title: '请输入收货人姓名',
					icon: "none"
				})
				return;
			}
			if (!mobile) {
				uni.showToast({
					title: '请输入手机号码',
					icon: "none"
				})
				return;
			}
			var regexp = /^[1]([3-9])[0-9]{9}$/;
			if (!regexp.test(mobile)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: "none"
				})
				return;
			}
			if (!addr) {
				uni.showToast({
					title: '请输入详细地址',
					icon: "none"
				})
				return;
			}

			uni.showLoading();
			var url = "/p/address/addAddr";
			var method = "POST";
			if (ths.addrId != 0) {
				url = "/p/address/updateAddr";
				method = "PUT";
			}
			//添加或修改地址
			var params = {
				url: url,
				method: method,
				data: {
					receiver: ths.receiver,
					mobile: ths.mobile,
					addr: ths.addr,
					province: ths.province,
					provinceId: ths.provinceId,
					city: ths.city,
					cityId: ths.cityId,
					areaId: ths.areaId,
					area: ths.area,
					userType: 0,
					addrId: ths.addrId
				},
				callBack: function (res) {
					uni.hideLoading();
					uni.navigateBack({
						delta: 1
					})
				}
			}
			http.request(params);
		},

		onReceiverInput: function (e) {
			this.receiver = e.detail.value

		},

		onMobileInput: function (e) {
			this.mobile = e.detail.value

		},

		onAddrInput: function (e) {
			this.addr = e.detail.value
		},


		//删除配送地址
		onDeleteAddr: function (e) {
			var ths = this;
			uni.showModal({
				title: '',
				content: '确定要删除此收货地址吗？',
				confirmColor: "#eb2444",
				success(res) {
					if (res.confirm) {
						var addrId = ths.addrId;

						uni.showLoading();
						var params = {
							url: "/p/address/deleteAddr/" + addrId,
							method: "DELETE",
							data: {},
							callBack: function (res) {
								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								})
							}
						}
						http.request(params);
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})

		}
	},

}
</script>

<style>
/* pages/editAddress/editAddress.wxss */

page {
	background: #fff;
}

/* input列表 */

.input-box {
	margin-bottom: 50rpx;
	background: #fff;
	padding: 0 20rpx;
}

.input-box .section {
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 28rpx;
	padding: 30rpx 0;
	line-height: 48rpx;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 2rpx solid #e5e5e5;
}

.input-box .section text {
	width: 20%;
	color: #333;
}

.input-box .section input {
	width: 70%;
	padding: 0 20rpx;
	color: #333;
}

.input-box .section picker {
	width: 70%;
	padding: 0 30rpx;
}

.input-box .section .pca {
	width: 70%;
	padding: 0 20rpx;
}

.input-box .section .arrow {
	width: 28rpx;
	height: 28rpx;
}

.input-box .section .arrow image {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

/* end input列表 */

/* 功能按钮 */

.btn-box {
	padding: 5px 10px;
	width: 100%;
	text-align: center;
	margin: auto;
}

.btn-box text {
	font-size: 30rpx;
}

.btn-box .clear.btn,
.keep.btn {
	width: 60%;
	height: 80rpx;
	line-height: 80rpx;
	margin: auto;
	text-align: center;
	border: 1rpx solid #eb2444;
	border-radius: 50rpx;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-box .keep {
	color: #fff;
	background-color: #eb2444;
}

.btn-box .clear.btn {
	margin-top: 40rpx;
	color: #eb2444;
	background-color: #f8f0f1b6;
}

/* end 功能按钮 */

.infoText {
	margin-top: 20rpx;
	text-align: center;
	width: 100%;
	justify-content: center;
}

picker-view {
	background-color: white;
	padding: 0;
	width: 100%;
	height: 380rpx;
	bottom: 0;
	position: fixed;
}

picker-view-column view {
	vertical-align: middle;
	font-size: 28rpx;
	line-height: 28rpx;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.animation-element-wrapper {
	display: flex;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
}

.animation-element {
	display: flex;
	position: fixed;
	width: 100%;
	height: 470rpx;
	bottom: 0;
	background-color: rgba(255, 255, 255, 1);
}

.animation-button {
	top: 20rpx;
	width: 290rpx;
	height: 100rpx;
	align-items: center;
}

picker-view text {
	color: #999;
	display: inline-flex;
	position: fixed;
	margin-top: 20rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	font-size: 34rpx;
	font-family: Arial, Helvetica, sans-serif;
}

.left-bt {
	left: 30rpx;
}

.right-bt {
	right: 20rpx;
	top: 20rpx;
	position: absolute;
	width: 80rpx !important;
}

.line {
	display: block;
	position: fixed;
	height: 2rpx;
	width: 100%;
	margin-top: 89rpx;
	background-color: #eee;
}
</style>
